<!-- 检查结果录入 -->
<template>
    <div class="result-input-container">
      <!-- 检查项目筛选 -->
      <div class="project-filter">
        <div class="project-tags">
          <span 
            v-for="project in allProjects"
            :key="project.checkItemId"
            class="tag"
            :class="{ active: selectedProject === project.checkItemId }"
            @click="toggleProject(project.checkItemId)"
            :model="allProjectsId"
          >
            {{ project.checkItemName }}
          </span>
        </div>
      </div>
      <!-- 查询区域 -->
      <div class="search-area">
        <div class="input-group">
          <label>挂号单号</label>
          <input v-model="searchId" placeholder="请输入检查单号">
        </div>
        <div class="input-group">
          <label>患者姓名</label>
          <input v-model="searchName" placeholder="请输入患者姓名">
        </div>
        <button class="query-btn" @click="handleSearch">Q查询</button>
        <button class="reset-btn" @click="handleReset">Q重置</button>
      </div>
  
      <!-- 数据表格 -->
     
      <el-table :data="data" style="width: 100%"  row-key="itemId">
    <el-table-column prop="itemId" label="检测单号" width="" />
    <el-table-column prop="checkItemName" label="项目名称" width="" />
    <el-table-column prop="patientName" label="患者名称" />
    <el-table-column prop="" label="检查状态">
      <template #default="scope">
        {{ scope.row.resultStatus==0 ?"检查中":"" }}
       </template>
    </el-table-column>
    <el-table-column prop="resultMsg" label="检查结果"/>
    <el-table-column prop="createTime" label="创建时间" >
      <template #default="scope">
        {{formatDate( scope.row.createTime,'YYYY年MM月DD日 HH:mm' )}}</template>
      </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="submitResult(scope.$index, scope.row)" plain>人录结果</el-button>       
      </template>
    </el-table-column>
  </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <div class="demo-pagination-block">
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[1, 2, 3]" :size="size"
          :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      </div>
    <!-- </div> -->
          <!-- 录入结果模态框 -->
  <el-dialog v-model="centerDialogVisible" :title="'录入'+namex+'结果'" width="500" center>
    <!-- 主体文本类容 -->
     检查结果：<br> <el-input
    v-model="textarea.resultMsg"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="输入结果"
  />
  <br>
  添加图片：
        <el-upload class="avatar-uploader" action="http://localhost:8080/user/uploadImg" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="{ token: token }">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" height="150px" width="200px"/>
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="add">确定</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  
  </template>



  
  <script lang="ts" setup>
  import http from '@/http'
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'  
import type { ComponentSize,TableInstance } from 'element-plus'
import { formatDate } from '@/utils/dateFormatter'
import type { UploadProps } from 'element-plus'
import { useCookies } from 'vue3-cookies'

const { cookies } = useCookies();
//从cookies中获取token
const token = cookies.get('token')
// 上传图片开始
//接收图片
let imageUrl=ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,//响应回来的数据
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    //给用户对象的头像属性赋值
    textarea.value.resultImg = response
    console.log(imageUrl.value)
    console.log(textarea.value.resultImg)
}
// 上传之前调用，验证文件格式和大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type != 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
        ElMessage.error('图片格式不对或文件损坏!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小不能超过 2MB!')
        return false
    }
    return true
}
// 用户上传图片结束


// 控制录入结果是否显示
let centerDialogVisible = ref(false)
// 录入结果数据
let textarea=ref({
  id:'',
  resultMsg:'',
  resultImg:'',
})
      // 响应式数据
      let searchId = ref('')
      let searchName = ref('')
      let selectedProject = ref('')
      let currentPage = ref(1)
      let jumpPage = ref(1)
      // 当前页
      let pageNum=ref(1)
      // 显示几页
      let pageSize=ref(4)
      //
      // 总条数
      let total=ref()
      const background = ref(false)
      const size = ref<ComponentSize>('default')
      const disabled = ref(false)
      let allProjectsId=ref('')
      // 表格数据
      let data = ref([])
//装载所有的项目
let allProjects=ref([])
let getCheckItemName=()=>{
    //查询所有的项目
  http.post("/item/getCheckItemName").then((res)=>{ 
    allProjects.value=res
    console.log(allProjects.value)
  })
}
// 分页方法
const handleSizeChange = (val: number) => {
  getPage();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  getPage();
  console.log(`current page: ${val}`)
}
     // 方法
     const toggleProject = (project) => {
      if(allProjectsId.value==project){
        allProjectsId.value=''
        selectedProject.value = selectedProject.value === project ? '' : project
        return;
      }
      allProjectsId.value=project
        selectedProject.value = selectedProject.value === project ? '' : project
      }
// 查询所有
 let getPage=()=>{
  http.get("/checkresult/getCheckresult", {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            name: searchName.value,
            regId:searchId.value,
            allProjectsId:allProjectsId.value,  
        }
    }).then((res) => {
      if(res.list.length>0){
         console.log(res)
        //存储获取到的当前页数据
        data.value=res.list
        total.value=res.total
      }else{
        console.log(res)
        ElMessage({
    message: '暂时没有患者',
    type: 'warning',
  })
      }
    })
 } 
 let handleSearch=()=>{
  data.value=[]
  getPage()
 }
 let handleReset=()=>{
  searchName.value='',
  searchId.value='',
  selectedProject.value=''
 }
//加载事件总查询 
onMounted(()=>{
 getPage();
  getCheckItemName();
})
// 录入结果的名称
let namex=ref('')
let submitResult=(index: number, row)=>{
  
  imageUrl.value=row.resultImg
  textarea.value.id=row.itemId
  textarea.value.resultMsg=row.resultMsg

  namex.value=row.patientName
  centerDialogVisible.value=true
}
//结果录入方法
let add=()=>{
  http.post("/checkresult/addResultxx",textarea.value).then((res)=>{
    console.log(res)
    if(res>0){
      textarea.value={
        id:'',
  resultMsg:'',
  resultImg:'',
      }
      imageUrl.value=''
centerDialogVisible.value=false
      ElMessage({
        message: '已录入检查结果！',
        type: 'success',
    })
    }else{
      ElMessage.error('入检查结果失败！')
    }
    getPage();
    //调用查询所有的方法
  })
}
  </script>
  
  <style scoped>
  .result-input-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Microsoft YaHei', sans-serif;
  }
  
  .project-filter {
    margin-bottom: 20px;
  }
  
  .project-tags {
    display: flex;
    gap: 10px;
  }
  
  .tag {
    padding: 8px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .tag.active {
    background: #409eff;
    color: white;
    border-color: #409eff;
  }
  
  .search-area {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
  }
  
  .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  input {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 180px;
  }
  
  .query-btn {
    background: #409eff;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }
  
  .reset-btn {
    background: #ff4d4f;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }
  
  .data-table {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 12px 10px;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
  }
  
  th {
    background: #f5f7fa;
    color: #606266;
    font-weight: 600;
  }
  
  .result-input {
    width: 120px;
    padding: 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
  
  .input-btn {
    background: #67c23a;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .input-btn:disabled {
    background: #c0c4cc;
    cursor: not-allowed;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .pagination button {
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .pagination button.active {
    background: #409eff;
    color: white;
    border-color: #409eff;
  }
  
  .page-jump {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }
  
  .page-jump input {
    width: 60px;
  }
  
  .total, .page-size {
    color: #909399;
    font-size: 14px;
  }
  </style>